import { Button, message, Steps } from "antd";
import "./index.less"
import CreateScoringResultComponent from "./components/CreateScoringResultComponent";
import CreateAppComponent from "./components/CreateAppComponent";
import CreateQuestionsComponent from "./components/CreateQuestionsComponent";
import { useState } from "react";
import { addAppUsingPost } from "@/services/backend/appController";
import { addQuestionUsingPost } from "@/services/backend/questionController";
import { addScoringResultUsingPost } from "@/services/backend/scoringResultController";
import { useNavigate } from "@umijs/max";

const steps = [
    {
        title: 'First',
        content: 'First-content',
    },
    {
        title: 'Second',
        content: 'Second-content',
    },
    {
        title: 'Last',
        content: 'Last-content',
    },
];

const BuildAppPage: React.FC = () => {

    const [currentStep, setCurrentStep] = useState(0);
    const [appId, setAppId] = useState(0);
    const [scoringStrategy, setScoringStrategy] = useState(0);
    const items = steps.map((item) => ({ key: item.title, title: item.title }));
    const navigate = useNavigate();
    const next = () => {
        if (currentStep < steps.length - 1) {
            setCurrentStep(currentStep + 1);
        }
    };

    const prev = () => {
        if (currentStep > 0) {
            setCurrentStep(currentStep - 1);
        }
    };

    const submitCreateApp = (data: API.AppAddRequest) => {
        console.log(data);
        if (!data.appName || !data.appDesc) {
            message.error('请输入应用名称和应用描述');
            return;
        }
        if(data.scoringStrategy === 0 || data.scoringStrategy === 1){
            setScoringStrategy(data.scoringStrategy);
        }
        addAppUsingPost(data).then(res => {
            if (res.code === 0) {
                message.success('创建成功');
                if (res.data) {
                    setAppId(res.data);
                }
                next();
            } else {
                message.error(res.message);
            }
        })
    }

    const submitCreateQuestions = (data: API.QuestionContent[]) => {
        console.log(data);
        addQuestionUsingPost({
            appId,
            questionContent: data
        }).then(res => {
            if (res.code === 0) {
                message.success('创建成功');
                next();
            } else {
                message.error(res.message);
            }
        })
        next();
    }

    const submitCreateScoringResult = (data: API.ScoringResultAddRequest[]) => {
        console.log(data);
        data.forEach(item => {
            addScoringResultUsingPost({
                ...item
            }).then(res => {
                if (res.code === 0) {
                    message.success('创建成功');
                    next();
                } else {
                    message.error(res.message);
                }
            })
        });

    }

    return (
        <>
            <div className="container">
                <Steps current={currentStep} items={items} style={{ marginBottom: 24, marginTop: 12 }} />
                <div className="content">
                    <div style={{ display: currentStep === 0 ? 'block' : 'none' }}>
                        <CreateAppComponent onCancel={() => { }} onSubmit={submitCreateApp} />
                    </div>
                    <div style={{ display: currentStep === 1 ? 'block' : 'none' }}>
                        <CreateQuestionsComponent appId={appId} onSubmit={submitCreateQuestions} />
                    </div>
                    <div style={{ display: currentStep === 2 ? 'block' : 'none' }}>
                        {scoringStrategy === 0 && <CreateScoringResultComponent appId={appId} onSubmit={submitCreateScoringResult} />}
                    </div>
                </div>
                <div className="btns" style={{ display: 'flex', position: 'absolute', bottom: "10vh", right: "8vw", gap: 10 }}>
                    {currentStep > 1 && <Button onClick={() => prev()}>Previous</Button>}
                    {currentStep === 1 && <Button type="primary" onClick={() => next()}>Next</Button>}
                    {currentStep === 2 && <Button type="primary" onClick={()=> {message.success('创建成功 请等待应用审核通过') ;navigate('/app/my')}}>确认创建</Button>}
                </div>

            </div>

        </>
    );
};
export default BuildAppPage;